<template>
  <div class="map-toolbar">
    <el-select
      :value="mapType"
      placeholder="请选择"
      @change="mapTypeChange"
      style="width: 130px;"
    >
      <el-option
        v-for="item in MapTypeList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-divider direction="vertical" ></el-divider>

    <el-input
      :value="city"
      placeholder="请输入城市名称"
      style="width:150px;margin-right:10px"
      @input="cityInput"
      @keyup.enter.native="$emit('switchCity')"></el-input>
    <el-button
      icon="el-icon-search"
      circle
      @click="$emit('switchCity')"></el-button>
      
    <el-divider direction="vertical" ></el-divider>

    <el-button :type="btn === 1 ? 'primary' : ''" icon="el-icon-thumb" @click="drag"></el-button>
    <el-button :type="btn === 2 ? 'primary' : ''" icon="el-icon-map-location" @click="drawSome"></el-button>
    <el-button :type="btn === 3 ? 'primary' : ''" icon="el-icon-edit" @click="drawArea"></el-button>
  </div>
</template>

<script>
export default {
  name: "MapToolbar",
  data() {
    return {
      btn: 1,
      MapTypeList: [
        {
          label: "百度地图",
          value: 1,
        },
        {
          label: "高德地图GL",
          value: 2,
        },
        // {
        //   label: "google地图",
        //   value: 3,
        // },
      ],
      radio1: ''
    }
  },
  props: {
    mapType: {
      type: Number,
    },
    city: {
      type: String,
    },
  },
  methods: {
    mapTypeChange(val) {
      this.$emit("update:mapType", val)
      this.btn = 1
    },
    // 拖动
    drag() {
      this.btn = 1
      this.$emit('drag')
    },
    // 画点
    drawSome() {
      this.btn = 2
      this.$emit('drawSome')
    },
    // 绘制多边形
    drawArea() {
      this.btn = 3
      this.$emit('drawArea')
    },
    cityInput(val) {
      this.$emit('update:city', val)
    }
  },
}
</script>

<style lang="scss" scoped>
.map-toolbar {
  position: absolute;
  top: 20px;
  left: 20px;
  min-width: 200px;
  min-height: 40px;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 5px;
}
</style>
